<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            width: 210px;
            height: 920px;
            background-color: #1f1f4b;
            color: white;
            float: left;
            padding-left: 9px;
        }

        .box1,
        .box2 {
            line-height: 40px;
            width: 200px;
            height: 50px;
            text-align: center;
            border-bottom: 1px solid #ccc;
        }

        .box3,
        .box4 {

            width: 200px;

        }

        ul li {
            height: 40px;
            text-align: center;
            line-height: 40px;
        }

        .top {
            width: 700PX;
            height: 50px;
            line-height: 50px;
        }

        input {
            width: 200px;
            height: 30px;
            border-radius: 5px;
            border: none;
            background-color: #ccc;
        }

        .top>span:nth-child(1) {
            margin-left: 50px;
        }

        .top>span {
            margin-right: 20px;
        }

        .active {
            background-color: #4169E1;
            border-radius: 5px;
        }

        .active1 {
            background-color: white;
            border-radius: 5px;
        }

        .p {
            width: 100%;
            height: 100%;
            font-size: 30px;
            margin-left: 230px;

        }

        .p>span:nth-child(2) {
            margin-left: 700px;
            font-size: 20px;
        }

        .big-box {
            width: 1125px;
            height: 100%;
            float: left;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 20px;
        }

        .one,
        .two,
        .three,
        .frou {
            width: 550px;
            height: 400px;
            border: 1px solid black;
            margin: 5px;

        }

        .tops,
        .feader {
            display: flex;
            justify-content: space-between;
        }

        .banner {
            width: 550px;
            height: 330px;
        }

        .banner1 {
            width: 550px;
            height: 330px;
        }

        table {
            width: 530px;
            height: 30px;
            padding-left: 10px;
        }

        tbody {
            width: 500px;
            height: 100%;
        }
       th{
        font-size: 20px;
        border-bottom: 1px solid black;
        height: 20px;
       }

        .three {
            overflow: auto;
        }
       .number{
        width: 100%;
       height: 100px;
       }
       .number span:nth-child(1){
        float: left;
        line-height: 100px;
        font-size: 40px;
        margin-left: 10px;
       }
       .number span:nth-child(2){
        float: right;
        /* line-height: 100px; */
        /* height: 140px; */
        margin-top: 30px;
        text-align: right;
        margin-right: 10px;
        
       }
       .number>p{
        float: right;
       }

    </style>
</head>

<body>
    <div class="box">
        <div class="box1">AdminLTE 3</div>
        <div class="box2">Alexander Pierce</div>
        <div class="box3">
            <ul>
                <li class="active">Dashboard</li>
                <li>Dashboard v1</li>
                <li>Dashboard v2</li>
                <li class="active1" style="color: black;">Dashboard v3</li>
            </ul>
        </div>
        <div class="box4">
            <ul>
                <li>Widgets</li>
                <li>Chart</li>
                <li>UI Elements</li>
                <li>Forms</li>
                <li>Tables</li>
            </ul>
        </div>
        <div class="box5">
            <p>EXAMPLES</p>
            <ul>
                <li>Calender</li>
                <li>Mailbox</li>
                <li>pages</li>
                <li>Extras</li>
            </ul>
        </div>
    </div>
    <div class="top">
        <span>Home</span>
        <span>Contact</span>
        <input type="text" placeholder="Search">

    </div>
    <div class="p">
        <span>Dashboard v3</span>
        <span>Home / Dashboard v3</span>
    </div>

    <div class="big-box">
        <div class="one">
            <div class="tops">
                <span style="margin-left: 10px; font-size: 20px;">Online Store Visitors</span>
                <span style="color:#00BFFF; margin-right: 10px; ">View Report</span>
            </div>
            <div class="feader" style="margin-top: 30px;">
                <span style="margin-left: 10px; font-weight: bold;font-size: 20px;">820</span>
                <span style="margin-right: 10px; color: #00FF7F;">↑12.5％</span>
            </div>
            <div class="banner"></div>
        </div>
        <div class="two">
            <div class="tops">
                <span style="margin-left: 10px; font-size: 20px;">Sales</span>
                <span style="color:#00BFFF; margin-right: 10px; ">View Report</span>
            </div>
            <div class="feader" style="margin-top: 30px;">
                <span style="margin-left: 10px; font-weight: bold;font-size: 20px;">$18,230.00</span>
                <span style="margin-right: 10px; color: #00FF7F;">↑33.1％</span>
            </div>
            <div class="banner1"></div>
        </div>
        <div class="three">
            <p style="margin: 10px; font-size: 20px;">Products</p>
            <table>
                <thead style="margin-bottom: 10px;">
                    <tr>
                        <th style="text-align: left;">Product</th>
                        <th>price</th>
                        <th style="text-align: center;">Sales</th>
                        <th>More</th>
                    </tr> 
                </thead> 
              
           
                <tbody>

                </tbody>

            </table>

        </div>
        <div class="frou">
            <p style="margin: 10px;font-size: 20px;">Online Store Overview</p>
            <div class="number">
                <span style="color: green;">☼</span> <span style="font-weight: blod;"> <b style="color:green ;">↑</b> 12.5％ <br>CONVERSION RATE</span> 
                <!-- <p>CONVERSION RATE</p> -->
            </div>
            <div class="number">
                <span style="color: rgb(225, 225, 50);">☽</span> <span style="font-weight: blod;"> <b style="color:green ;">↑</b> 0.8％ <br>SALES RATE</span> 
                <!-- <p>CONVERSION RATE</p> -->
            </div>
            <div class="number">
                <span style="color: green;">☼</span> <span style="font-weight: blod;"> <b style="color:green ;">↑</b> 12.5％ <br>CONVERSION RATE</span> 
                <!-- <p>CONVERSION RATE</p> -->
            </div>
        </div>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./mockdata.js"></script>
<script>
    let one1 = document.querySelector('.one>.banner')
    let banner1 = document.querySelector('.two>.banner1')
    var res = echarts.init(one1)
    var set = echarts.init(banner1)
    res.setOption({
        title: { //图表的标题
            text: 'Online Store Visitors                                        Sincelast Week'

            // left:'center',
        },
        legend: { //图例
            // top:25,
            bottom: 25,
            right: 10,
        },
        xAxis: { //x轴设置
            data: ['18th', '20th', '22th', '24th', '26th', '28th', '30th']
        },
        yAxis: { //y轴设置

            splitLine: {
                show: false
            }
        },
        series: [ //数据系列

            {
                name: 'This Week',
                type: 'line',//'line' , 'bar' , 'pie'
                data: [100, 120, 170, 170, 180, 180, 200],
                // symbolSize:15, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'blue', //折线颜色
                        // borderWidth:2, //圆点的边框宽度
                        borderColor: 'blue', //圆点的边框颜色
                        lineStyle: { width: 2 }, //折现的宽度
                        shadowBlur: 5,
                        shadowColor: '#188df0'

                    }
                }

            },
            {
                name: 'Last Week',
                type: 'line',//'line' , 'bar' , 'pie'
                data: [60, 80, 70, 70, 80, 80, 100],
                // symbolSize:15, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'grey', //折线颜色
                        // borderWidth:2, //圆点的边框宽度
                        borderColor: 'grey', //圆点的边框颜色
                        lineStyle: { width: 2 }, //折现的宽度
                        shadowBlur: 5,
                        shadowColor: '#188df0'

                    }
                }

            }

        ]
    });

    set.setOption({
        title: { //图表的标题
            text: 'Sales Over Time                                           Since Last month'

            // left:'center',
        },
        legend: { //图例
            // top:25,
            bottom: 25,
            right: 10,
        },
        xAxis: { //x轴设置
            data: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
        },
        yAxis: { //y轴设置
            // data:['$0','$1k','$2k','$3k'    ],
            splitLine:{
                show:false
            }
        },
        series: [ //数据系列

            {
                name: 'This year',
                type: 'bar',//'line' , 'bar' , 'pie'
                data: [1000, 2000, 3000, 2500, 2800, 2500, 3000],
                // symbolSize:15, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'blue', //折线颜色
                        // borderWidth:2, //圆点的边框宽度
                        borderColor: 'blue', //圆点的边框颜色
                        lineStyle: { width: 2 }, //折现的宽度
                        shadowBlur: 5,
                        shadowColor: '#188df0'

                    }
                }

            },
            {
                name: 'Last year',
                type: 'bar',//'line' , 'bar' , 'pie'
                data: [800, 1800, 2800, 2000, 1800, 1500, 2000],
                // symbolSize:15, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'grey', //折线颜色
                        // borderWidth:2, //圆点的边框宽度
                        borderColor: 'grey', //圆点的边框颜色
                        lineStyle: { width: 2 }, //折现的宽度
                        shadowBlur: 5,
                        shadowColor: '#188df0'

                    }
                }

            }

        ]
    });
    render(data.list)
    function render(data) {
        var str = data.map((item, index) => {
            return `<tr>
                    <td style="text-align: left; width:248px">${item.name}</td>
                    <td style="text-align: center;">$${item.phone}USD</td>
                    <td style="text-align: center; width:200px;"> ${item.ingroup}${item.phone},000Sold</td>
                    <td style="text-align: center;">☢♡</td>
                  
                </tr>  <br>`
        }).join('')
        document.querySelector('tbody').innerHTML = str;
    }


</script>